<template>
    <div>
        <div class="nav-left">
            <ul>
                <li><router-link to="/User/News">新闻</router-link></li>
                <li><router-link to="/User/Network">网页</router-link></li>
                <li><router-link to="/User/Knowledge">知道</router-link></li>
                <li><router-link to="/User/Music">音乐</router-link></li>
            </ul>
        </div>
        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
 .nav-left{
     float: left;
 }
 .nav-left ul li{
     list-style: none;
     width: 100px;
     height: 60px;
     color: #fff;
     text-align: center;
     border: 2px solid #aaa;
     background:  lightseagreen;
     margin-bottom: 10px;
      font-size: 30px;
    line-height: 60px;
 }
  .nav-left ul li:hover{
      background: blue;
  }
  .container{
      display: inline-block;
      width: 60%;
      height:700px;
      border: 1px solid #666;
      margin: 20px auto 0;
  }
</style>